<template>
  <div class="container">
    <div class="box">
      <el-table
        :data="categoryList"
        stripe
        :header-cell-style="headClass"
        :cell-style="tableClass"
        style="width: 100%"
      >
        <el-table-column prop="type" label="类目ID" width="80" fixed="left"></el-table-column>
        <el-table-column prop="name" label="类目名" min-width="150"></el-table-column>
        <el-table-column prop="placeName" label="所属导航" min-width="120"></el-table-column>
        <el-table-column prop="count" label="文章数" min-width="120"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="operation='update';handleEditYes(scope.$index,scope.row)"
            >修改</el-button>
            <el-button type="text" size="small" @click="handleEditNo(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right;margin-top:6px;">
        <el-button type="primary" @click="operation='add';dialogFormVisible=true">增添类目+</el-button>
      </div>
    </div>

    <!-- 完成弹出框表单 -->
    <el-dialog
      title="填写信息"
      :visible.sync="dialogFormVisible"
      center
      @close="notSubmit('okForm')"
      width="260px"
    >
      <el-form :rules="rules" label-position="top" :model="okForm" ref="okForm">
        <el-form-item label="新类目名" prop="name">
          <el-input v-model="okForm.name" onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="所属导航" prop="place">
          <el-select
            v-model="okForm.place"
            placeholder="请选择所属导航"
            style="-webkit-tap-highlight-color: transparent;"
          >
            <el-option label="公告通知" value="1"></el-option>
            <el-option label="服务中心" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align:center;">
          <el-button @click="notSubmit('okForm')">取消</el-button>
          <el-button type="primary" @click="okSubmit('okForm')">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [],
      dialogFormVisible: false, //弹出框表单
      okForm: { type: "", name: "", place: "" }, //弹出框数据
      operation: "", //判断 add 或 update 操作
      rules: {
        name: [{ required: true, message: "请输入类目", trigger: "blur" }],
        place: [{ required: true, message: "请选择", trigger: "change" }]
      }
    };
  },
  mounted() {
    this.getCategoryList();
  },
  methods: {
    //获取类目列表
    getCategoryList() {
      this.$axios
        .get("/api/article/queryAllArticleType")
        .then(res => {
          res.data.articleTypes.forEach((item, i) => {
            switch (item.place) {
              case 1:
                item.placeName = "公告通知";
                break;
              case 2:
                item.placeName = "服务中心";
                break;
            }
          });
          this.categoryList = res.data.articleTypes.filter(item => {
            return item.place !== 3 && item.place !== 4;
          });
        })
        .catch(err => {
          this.$message.error("获取类目失败");
        });
    },
    // 表头样式设置
    headClass() {
      return "text-align: center;";
    },
    // 单元格样式
    tableClass() {
      return "text-align: center;";
    },
    //操作事件
    handleEditYes(index, row) {
      this.okForm.type = row.type;
      this.dialogFormVisible = true;
    },
    handleEditNo(index, row) {
      this.$confirm("确定要 删除 吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$axios
          .get("/api/manage/article/deleteArticleType/" + row.type)
          .then(res => {
            if (res.data.status == 1) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.categoryList.splice(index, 1);
            }
          })
          .catch(err => {
            this.$alert("删除失败,请稍后重试!", {
              confirmButtonText: "确定",
              center: true
            });
          });
      });
    },
    //确认信息
    okSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.operation == "add") {
            this.$axios
              .post("/api/manage/article/addArticleType", this.okForm)
              .then(res => {
                if (res.data.status == 1) {
                  this.dialogFormVisible = false;
                  this.$message({
                    type: "success",
                    message: "增添成功!"
                  });
                  // ++++数据刷新
                  this.getCategoryList();
                  this.$refs[formName].resetFields();
                } else {
                  this.$alert("增添失败：" + res.data.message, {
                    confirmButtonText: "确定",
                    center: true
                  });
                }
              });
          } else if (this.operation == "update") {
            this.$axios
              .post(
                "/api/manage/article/updateArticleType",
                this.okForm
              )
              .then(res => {
                if (res.data.status == 1) {
                  this.dialogFormVisible = false;
                  this.$message({
                    type: "success",
                    message: "修改成功!"
                  });
                  this.getCategoryList();
                  this.$refs[formName].resetFields();
                } else {
                  this.$alert("修改失败：" + res.data.message, {
                    confirmButtonText: "确定",
                    center: true
                  });
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    //取消按钮
    notSubmit(formName) {
      this.dialogFormVisible = false;
      this.okForm.id = "";
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .box {
    min-height: 400px;
    margin-bottom: 10px;
  }
}
</style>